<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- <button onclick="alert('abcd')">按钮</button> -->

    <button id="btn">按钮</button>


    <script>
        // BOM：属于浏览器的一些对象，location.href
        // 1.0 获取到按钮的DOM对象
        let btnObject = document.querySelector('#btn');

        // 2.0 给按钮动态注册一个click事件
        // btnObject.onclick = function () {
        //     alert('onclick')
        // }

        // btnObject.onclick = function () {
        //     alert('onclick1')
        // }

        // 2.0.1 使用 addEventListener的方式来注册多个事件
        // 语法格式：addEventListener(事件类型，回调函数)
        btnObject.addEventListener('click', function () {
            alert('addEventListener 1');
        })

        btnObject.addEventListener('click', function () {
            alert('addEventListener 2');
        })

    </script>
</body>

</html>